<template>
  <!-- 月子中心管理---月子列表 -->
  <div class="mainbody">
    <!-- 搜索区域 -->
    <div class="search_box">
      <div class="cooperation">
        <el-button class="hezuo all"
                   type="primary"
                   @click="AllCooperation">全部</el-button>
        <el-button class="hezuo"
                   plain
                   @click="Cooperation(0)">未合作</el-button>
        <el-button class="hezuo"
                   plain
                   @click="Cooperation(1)">合作</el-button>
      </div>

    </div>
    <!-- 按钮区域 -->
    <div class="table_box">
      <!-- 按钮 -->
      <div>
        <el-button type="primary"
                   size="mini"
                   @click="openSeachDialog"
                   icon="el-icon-search">搜索</el-button>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-plus"
                   @click="openAddDialog">新增</el-button>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-download"
                   @click="exportFile">导出</el-button>
        <el-button type="primary"
                   icon="el-icon-download"
                   size="mini"
                   :v-show="exportFileListFlag"
                   @click="getExportList"></el-button>

      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="list"
                  v-loading="listLoading"
                  element-loading-text="拼命加载中"
                  :height="tableHeight"
                  border
                  stripe
                  style="width: 100%">
          <el-table-column type="selection"
                           align="center"
                           width="40">
          </el-table-column>
          <el-table-column fixed
                           prop="postpartum_id"
                           align="center"
                           label="ID"
                           width="80">
          </el-table-column>
          <el-table-column fixed
                           prop="postpartum_name"
                           align="center"
                           label="月子中心名称"
                           width="120">
          </el-table-column>
          <el-table-column prop="company_name"
                           align="center"
                           label="公司名称"
                           width="120">
          </el-table-column>
          <el-table-column prop="provinces"
                           align="center"
                           label="所属地区"
                           width="120">
            <template slot-scope="scope">
              <span>{{scope.row.provinces}} / {{scope.row.city}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="bed"
                           label="床位数"
                           align="center"
                           width="100">
          </el-table-column>
          <el-table-column prop="TV"
                           label="电视及网络情况"
                           align="center"
                           width="120">
            <template slot-scope="scope">
              <el-popover width="160"
                          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                          :ref="`popover-${scope.$index}`">

                <el-button type="text"
                           slot="reference"
                           @click="getTVList(scope.row)">查看</el-button>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column prop="contract_status"
                           align="center"
                           label="合同状态"
                           width="80">
            <template slot-scope="scope">
              <span>{{scope.row.contract_status|ContractStatusType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cooperation_money"
                           align="center"
                           label="合作金额"
                           width="80">
          </el-table-column>
          <el-table-column prop="payment_cycle"
                           align="center"
                           label="付款周期"
                           width="80">
          </el-table-column>
          <el-table-column prop="cooperation_status"
                           align="center"
                           label="合作状态"
                           width="80">
            <template slot-scope="scope">
              <span>{{scope.row.cooperation_status|CooperationType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="audit_status"
                           label="审核状态"
                           align="center"
                           width="80">
            <template slot-scope="scope">
              <span>{{scope.row.audit_status|AuditStatusType}}</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right"
                           align="center"
                           label="操作"
                           width="350">
            <template slot-scope="scope">
              <el-button @click="openDrawer(scope.row)"
                         type="text"
                         size="small">查看</el-button>
              <el-button type="text"
                         size="small"
                         @click="openEdithDialog(scope.row)">编辑资料</el-button>
              <el-button type="text"
                         size="small">合同管理</el-button>
              <el-button type="text"
                         size="small">展柜情况</el-button>
              <el-button type="text"
                         size="small">操作日志</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="listQuery.page"
                       background
                       :page-sizes="[1,5,20,50,100,200]"
                       :page-size="listQuery.page_size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>

    </div>

    <!-- dialong弹出框 -->
    <el-dialog :title="dialog.dialongTitle"
               :visible.sync="dialog.dialogVisible"
               width="50%"
               :before-close="handleClose">
      <!-- 输入框区域 -->
      <div class="search-Box"
           v-if="dialog.dialongTitle == '搜索'">
        <el-form :model="listQuery"
                 ref="queryForm"
                 size="small"
                 :inline="true"
                 label-width="100px">
          <el-form-item label="月子中心名称"
                        prop="yueziname">
            <el-input v-model="listQuery.postpartum_name"
                      placeholder="请输入月子中心名称"
                      clearable />
          </el-form-item>
          <el-form-item label="所在地区"
                        prop="area">
            <el-cascader ref="cascader"
                         clearable
                         placeholder="请选择地区"
                         :props="cascaderProps"
                         :options="cityOptions"
                         v-model="listQuery.area"></el-cascader>
          </el-form-item>
          <el-form-item label="公司名称"
                        prop="companyName">
            <el-input v-model="listQuery.company_name"
                      placeholder="请输入"
                      clearable />
          </el-form-item>
          <el-form-item label="合同状态"
                        prop="contract_status">
            <el-select v-model="listQuery.contract_status"
                       placeholder="请选择">
              <el-option v-for="item in contractStatusOption"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="合作状态"
                        prop="cooperation_status">
            <el-select v-model="listQuery.cooperation_status"
                       placeholder="请选择">
              <el-option v-for="item in cooperationOption"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态"
                        prop="audit_status">
            <el-select v-model="listQuery.audit_status"
                       placeholder="请选择">
              <el-option v-for="item in auditStatusOption"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh"
                       size="mini"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 新增和编辑共用同一个from表单 -->
      <div class="add-Box"
           v-if="dialog.dialongTitle=='新增'||dialog.dialongTitle=='编辑资料'">
        <el-form :model="addyueziData"
                 label-width="100px"
                 ref="addFromRef"
                 :rules="addFromRules"
                 class="demo-ruleForm">
          <el-row :gutter="10"
                  v-if="dialog.dialongTitle=='新增'">
            <el-col :span="12">
              <el-form-item label="手机号:"
                            prop="mobile">
                <el-input v-model="addyueziData.mobile"></el-input>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码:"
                            prop="password">
                <el-input v-model="addyueziData.password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="月子中心名称:"
                            label-width="120px"
                            prop="postpartum_name">
                <el-input v-model="addyueziData.postpartum_name"
                          style="width:200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属地区:"
                            prop="area">
                <el-cascader ref="cascader"
                             clearable
                             placeholder="请选择地区"
                             :props="cascaderProps"
                             :options="cityOptions"
                             v-model="addyueziData.area"></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="详细住址:"
                            prop="address">
                <el-input v-model="addyueziData.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="床位数:"
                            prop="address">
                <el-input v-model="addyueziData.bed"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="公司名称:"
                            prop="address">
                <el-input v-model="addyueziData.company_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业执照:"
                            prop="license_file_id">
                <el-input v-model="addyueziData.license_file_id"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="开户行名称:"
                            prop="bank_name">
                <el-input v-model="addyueziData.bank_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对公银行账号:"
                            prop="bank_account">
                <el-input v-model="addyueziData.bank_account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="店铺照片:"
                            prop="store_file_id">
                <el-input v-model="addyueziData.store_file_id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作金额:"
                            prop="cooperation_amount">
                <el-input v-model="addyueziData.cooperation_amount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="付款周期:"
                            porp="data">
                <el-date-picker v-model="addyueziData.activeData"
                                @input="changeDate"
                                type="daterange"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="合同状态:"
                            prop="contract_status">
                <el-select v-model="addyueziData.contract_status"
                           placeholder="请选择">
                  <el-option v-for="item in contractStatusOption"
                             :key="item.vuale"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作状态:"
                            prop="cooperation_status">
                <el-select v-model="addyueziData.cooperation_status"
                           placeholder="请选择">
                  <el-option v-for="item in cooperationOption"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   v-if="dialog.dialongTitle=='新增'"
                   @click="add">新增</el-button>

        <el-button v-if="dialog.dialongTitle=='搜索'"
                   type="primary"
                   @click="handleFilter">搜索</el-button>
        <el-button v-if="dialog.dialongTitle=='编辑资料'"
                   type="primary"
                   @click="edit">修改</el-button>

      </span>
    </el-dialog>

    <!-- 弹出 标签页-->
    <el-drawer :visible.sync="drawer"
               direction="rtl"
               :with-header="false"
               size="60%"
               title="操作">
      <Tabs :tabs="tabs"
            :postpartum_id="postpartum_id"></Tabs>
    </el-drawer>

    <!-- 导出文件对话框 -->
    <outterDrawer :drawerObj="this.drawerObj"
                  :scene="this.exportScene"
                  ref="child">
      <template>
        <!-- //抽屉里面要展示的数据 -->

      </template>
    </outterDrawer>

  </div>
</template>

<script>
import { getYueziList, addYueziList, updataInfo } from '@/api/system/yueziCenter'
//导入导出文件组件
import outterDrawer from '@/components/Drawer'
//导入tabs组件
import Tabs from '@/components/Tabs/Tab.vue'
//导入 城市js
import cityData from "@/static/cityOption"

//合作状态
const cooperationOption = [
  { value: 0, label: '未合作' },
  { value: 1, label: '合作' }
]
//审核状态
const auditStatusOption = [
  { value: 0, label: "待审核" },
  { value: 1, label: "审核通过" },
  { value: 2, label: "审核失败" }
]
//合同状态
const contractStatusOption = [
  { value: 0, label: "已存档" },
  { value: 1, label: "未签合同" },
  { value: 2, label: "已寄出" },
  { value: 3, label: "其他" }
]


export default {
  components: { outterDrawer, Tabs },
  filters: {
    CooperationType (val) {
      const key = {
        0: '未合作',
        1: '合作',
      }
      return key[val]
    },
    AuditStatusType (val) {
      const key = {
        0: "待审核",
        1: "审核通过",
        2: "审核失败"
      }
      return key[val]
    },
    ContractStatusType (val) {
      const key = {
        0: "已存档",
        1: "未签合同",
        2: "已寄出",
        3: "其他"
      }
      return key[val]
    }
  },
  // watch: {
  //   postpartum_id (newstr, oldstr) {
  //     console.log(newstr, oldstr);
  //     this.$nextTick(() => {
  //       this.postpartum_id = newstr
  //       this.openDrawer(id)
  //     })
  //   }
  // },
  data () {
    return {
      //列表数据
      list: null,
      exportScene: 2,//场景
      drawerObj: {
        size: "500px",//抽屉大小
        drawer: false,//控制抽屉展开
        title: ''//抽屉的标题名
      },
      tabPane: '',
      postpartum_id: "",//点击查看的当前行  要给子传过去
      drawer: false,
      //电视机
      visible: false,
      //显示总页数
      total: 0,
      //查询的数据
      listQuery: {
        page: 1,//页码
        page_size: 20, //页码大小
        postpartum_id: "",//月子中心id
        postpartum_name: "",//月子名称
        company_name: "",//公司名称
        area: [],//所属地区
        activePer: "",
        contract_status: "",//合同状态
        cooperation_status: "",//合作状态
        audit_status: "",//审核状态

      },
      //downLoad Data
      downLoadData: {},
      fileInfoList: {},
      exportFileListFlag: false,
      tabs: [
        { label: "基础信息", name: "basicInfo" },
        { label: "电视及网络情况", name: "TvAndNetwork" },
        { label: "账号管理", name: "account" },
      ],

      dialog: {
        dialogVisible: false,
        dialongTitle: ""
      },
      //合同状态
      contractStatusOption,
      //审核状态
      auditStatusOption,
      //合作状态
      cooperationOption,
      //省市区
      cityOptions: cityData,
      //级联选择器
      cascaderProps: {
        value: "name",
        label: "name",
        children: "children"
      },
      //新增列表数据
      addyueziData: {
        mobile: "",//用户账号
        password: "", //密码
        postpartum_name: "",//月子中心名称
        provinces: "",//省份
        city: "",//城市
        address: "",//详细地址
        bed: null,//床位数
        company_name: "",//公司
        license_file_id: null,//营业执照id
        bank_name: "",//开户行
        bank_account: "",//开户账号
        store_file_id: "",//商店文件id
        cooperation_amount: null,//合作金额
        payment_cycle_begin: "",//	付款开启周期
        payment_cycle_end: "",//付款结束周期
        cooperation_status: "",//合作状态 【0 未合作 1合作】
        area: []
      },
      //新增规则
      addFromRules: {
        mobile: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        postpartum_name: [
          { required: true, message: '请输入月子中心名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        cooperation_amount: [
          { required: true, message: '请输入合作金额', trigger: 'blur' }
        ],
        cooperation_status: [
          { required: true, message: '请至少选择一个合作状态' }
        ],
        contract_status: [
          { required: true, message: '请至少选择一个合同状态' }
        ],
      }
    }
  },
  methods: {
    //初始化数据
    getList () {
      this.listLoading = true
      this.handleQueryData();
      getYueziList(this.listQuery).then((res) => {
        this.list = res.data.data.list
        this.total = res.data.data.count
        this.listLoading = false
      })
    },
    //重置
    reset () {
      this.resetTemp()
      this.getList()
    },
    resetTemp () {
      this.listQuery = {
        page: 1,
        page_size: 20,
        postpartum_name: "",
        area: [],
        provinces: "",//省份
        city: "",//城市
        contract_status: "",//合同状态
        cooperation_status: "",//合作状态
        audit_status: "",//审核状态
      }
    },
    //所有合作
    AllCooperation () {
      this.resetTemp()
      this.getList()
    },
    //合作与不合作
    Cooperation (val) {
      if (val == 0) {
        this.listQuery.cooperation_status = 0
        getYueziList(this.listQuery).then((res) => {
          if (res.data.code == "200") {
            this.list = res.data.data.list
            this.getlist()
          } else {
            this.$message.error(res.data.msg)
          }

        })
      } else if (val == 1) {
        this.listQuery.cooperation_status = 1
        getYueziList(this.listQuery).then((res) => {
          if (res.data.code == "200") {
            this.list = res.data.data.list
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    handleSizeChange (val) {
      this.listQuery.page_size = val
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    //打开搜索对话框
    openSeachDialog () {
      this.dialog.dialogVisible = true
      this.dialog.dialongTitle = "搜索"

    },
    openAddDialog () {
      this.dialog.dialogVisible = true
      this.dialog.dialongTitle = "新增"
      this.addyueziData = {
        mobile: "",//用户账号
        password: "", //密码
        postpartum_name: "",//月子中心名称
        provinces: "",//省份
        city: "",//城市
        address: "",//详细地址
        bed: null,//床位数
        company_name: "",//公司
        license_file_id: null,//营业执照id
        bank_name: "",//开户行
        bank_account: "",//开户账号
        store_file_id: "",//商店文件id
        cooperation_amount: null,//合作金额
        payment_cycle_begin: "",//	付款开启周期
        payment_cycle_end: "",//付款结束周期
        cooperation_status: "",//合作状态 【0 未合作 1合作】
        area: []
      }
      this.$nextTick(() => {
        this.$refs['cascader'].inputValue = ""
      })
    },
    openEdithDialog (row) {
      console.log(row);
      this.dialog.dialogVisible = true
      this.dialog.dialongTitle = "编辑资料"
      this.addyueziData = row
      this.addyueziData.activeData = []
      this.addyueziData.activeData.push(row.payment_cycle_begin)
      this.addyueziData.activeData.push(row.payment_cycle_end)
      this.$nextTick(() => {
        this.$refs['cascader'].inputValue = row.provinces + '/' + row.city
      })
    },
    changeDate () {
      this.$forceUpdate()
    },
    //搜索
    handleFilter () {
      this.dialog.dialogVisible = false
      this.listQuery.page = 1
      this.getList()
    },
    //新增
    add () {
      this.$refs.addFromRef.validate((valid) => {
        if (valid) {
          this.operadeData()
          addYueziList(this.addyueziData).then((res) => {
            if (res.data.code == "200") {
              this.getList()
              this.dialog.dialogVisible = false
              this.$message.success("新增成功")
            } else {
              this.$message.error(res.data.msg)
            }

          })
        } else {
          this.$message.warning("请填写必填字段")
          return false;
        }
      });
    },
    //编辑功能
    edit () {
      this.operadeData()
      updataInfo(this.addyueziData).then((res) => {
        if (res.data.code == "200") {
          this.getList()
          this.dialog.dialogVisible = false
          this.$message.success("修改成功")
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    operadeData () {
      if (this.addyueziData.area != '') {
        var provinces = this.addyueziData.area[0]
        var city = this.addyueziData.area[1]
        this.addyueziData.provinces = provinces
        this.addyueziData.city = city
      }
      if (this.addyueziData.activeData != '') {
        var startData = this.addyueziData.activeData[0]
        var endData = this.addyueziData.activeData[1]
        this.addyueziData.payment_cycle_begin = startData
        this.addyueziData.payment_cycle_end = endData
      }
    },
    //处理列表数据
    handleQueryData () {
      if (this.listQuery.area !== undefined && this.listQuery.area.length > 0) {
        this.listQuery.provinces = this.listQuery.area[0]
        this.listQuery.city = this.listQuery.area[1]
      } else {
        this.listQuery.provinces = null
        this.listQuery.city = null
      }
      if (Array.isArray(this.listQuery.activeData) && this.listQuery.activeData.length > 0) {
        this.listQuery.active_cycle_begin = this.listQuery.activeData[0]
        this.listQuery.active_cycle_end = this.listQuery.activeData[1]
      } else {
        this.listQuery.active_cycle_begin = ''
        this.listQuery.active_cycle_end = ''
      }
    },
    // 导出事件
    exportFile () {
      this.drawerObj.drawer = true
      this.drawerObj.title = "导出列表"
      this.$refs.child.processExport(this.listQuery)
    },
    // //下载文件
    // downLoad () {
    //   this.downLoadData.scene = this.searchValue.scene
    //   this.downLoadData.page = this.searchValue.page
    //   this.downLoadData.page_size = this.searchValue.page_size
    //   exportData(this.downLoadData).then((res) => {
    //     if (res.data.code == '200') {
    //       if (res.data.data.list.length > 0) {
    //         this.fileInfo = true
    //         this.fileInfoList = res.data.data.list
    //         console.log(getFileInfoList);
    //       }
    //       // this.tableData = res.data.data.list
    //     }
    //   })
    // },
    getExportList () {
      this.drawerObj.drawer = true
      this.drawerObj.title = "历史导出列表"
      this.$refs.child.getExportFileList()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    openDrawer (id) {
      this.drawer = true
      this.tabPane = 'yueziBasicInfo';
      this.postpartum_id = id.postpartum_id
    },

  },
  computed: {
    tableHeight () {
      const fullHeight = document.documentElement.clientHeight
      return fullHeight - 300
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.search_box {
  .cooperation {
    .hezuo {
      width: 100px;
      height: 30px;
      line-height: 12px;
    }
    .all {
      background-color: rgb(26, 188, 156);
      border: 1px solid rgb(26, 188, 156);
    }
    .el-button--primary:focus,
    .el-button--primary:hover {
      background: rgb(72, 201, 176);
      border-color: rgb(72, 201, 176);
      color: #fff;
    }
    .el-button.is-plain:focus,
    .el-button.is-plain:hover {
      background: #fff;
      border-color: rgb(26, 188, 156);
      color: rgb(26, 188, 156);
    }
  }
}

.table_box {
  margin-top: 10px;
  .table {
    overflow: auto;
    margin: 20px 20px 0px;
    box-shadow: 5px 5px 15px #ccc;
    /deep/.el-table__cell {
      .cell {
        color: rgba(0, 0, 0, 0.647058823529412);
      }
    }
  }
  .block {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
